<template>
    <view  class="index-content">
        <Navbar :hideBtn="true" title="首页" bgColor="#5bacff" :h5Show="true" :fixed="false"></Navbar>
        
        <view class="header">
            <view class="banner">
                <u-swiper
                    :list="bannerList"
                    keyName="image"
                    showTitle
                    circular
                    radius="5"
                    bgColor="#ffffff"
                    height="142"
                    ></u-swiper>
            </view>
        </view>
        
        <view class="warp">
            <!-- <view class="nav">
                <a href="#" class="item">
                    <u--image src="/static/icons/icon1.png" width="139rpx" height="139rpx"/>
                    <span>HR面试</span>
                </a>
                <a href="#" class="item">
                    <u--image src="/static/icons/icon2.png" width="139rpx" height="139rpx"/>
                    <span>笔试</span>
                </a>
                <a href="#" class="item">
                    <u--image src="/static/icons/icon3.png" width="139rpx" height="139rpx"/>
                    <span>技术面试</span>
                </a>
                <a href="#" class="item">
                    <u--image src="/static/icons/icon4.png" width="139rpx" height="139rpx"/>
                    <span>模拟面试</span>
                </a>
                <a href="#" class="item">
                    <u--image src="/static/icons/icon5.png" width="139rpx" height="139rpx"/>
                    <span>面试技巧</span>
                </a>
                <a href="#" class="item">
                    <u--image src="/static/icons/icon6.png" width="139rpx" height="139rpx"/>
                    <span>薪资查询</span>
                </a>
            </view> -->
            
            <u-grid :col="3">
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon1.png" width="139rpx" height="139rpx"/>
                        <span>HR面试</span>
                    </a>
                </u-grid-item>
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon2.png" width="139rpx" height="139rpx"/>
                        <span>笔试</span>
                    </a>
                </u-grid-item>
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon3.png" width="139rpx" height="139rpx"/>
                        <span>技术面试</span>
                    </a>
                </u-grid-item>
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon4.png" width="139rpx" height="139rpx"/>
                        <span>模拟面试</span>
                    </a>
                </u-grid-item>
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon5.png" width="139rpx" height="139rpx"/>
                        <span>面试技巧</span>
                    </a>
                </u-grid-item>
                <u-grid-item>
                    <a href="#" class="item">
                        <u--image src="/static/icons/icon6.png" width="139rpx" height="139rpx"/>
                        <span>薪资查询</span>
                    </a>
                </u-grid-item>
            </u-grid>
            
            <view class="go">
                <u--image src="/static/img/go.png" width="722rpx%" height="152rpx"/>
            </view>
        </view>
        <Gap />
        
        <view class="content job">
            <view class="con-hd">
                <u--image src="/static/icons/i1.png" width="38rpx" height="38rpx"></u--image>
                <h4>
                    <span>通知公告</span>
                </h4>
                <a href="#" class="more">更多>></a>
            </view>
            <view>
                <u-notice-bar :text="this.noticeTitleList" direction="column" speed="250" bgColor="#ffffff"
                    url="/pages/componentsB/tag/tag" />
                <!-- <u-notice-bar :text="text1"></u-notice-bar> -->
            </view>
        </view>
        <Gap />
        
        <view class="content job">
            <view class="con-hd">
                <u--image src="/static/icons/i2.png" width="38rpx" height="38rpx"></u--image>
                <h4>
                    <span>就业指导</span>
                </h4>
                <a href="#" class="more">更多>></a>
            </view>
            <view>
                <u-swiper
                    :list="bannerList"
                    keyName="image"
                    showTitle
                    circular
                    previousMargin="50"
                    nextMargin="50"
                    radius="5"
                    bgColor="#ffffff"
                    ></u-swiper>
            </view>
        </view>
        
    </view>
</template>

<script>
    
    import Navbar from '@/components/navbar/Navbar'
    import Gap from '@/components/gap/Gap'
    
    import * as NoticeApi from '@/api/work/notice'
    
    export default {
        components: {
          Navbar,
          Gap,
        },
        data() {
            return {
                bannerList: [
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
                        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
                        title: '身无彩凤双飞翼，心有灵犀一点通'
                    },
                    {
                        image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
                        title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
                    }
                ],
                list: [
                    'https://cdn.uviewui.com/uview/swiper/3.jpg',
                    'https://cdn.uviewui.com/uview/swiper/1.jpg',
                    'https://cdn.uviewui.com/uview/swiper/2.jpg'
                ],
                params: {
                    
                },
                text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
                noticeList: ["1","2"],
                noticeTitleList: []
            }
        },
        created() {
            this.getNoticeList();
            this.getStatusBarHeight();
        },
        methods: {
            getStatusBarHeight() {
                
            },
            getNoticeList() {
                NoticeApi.getNoticeList(this.params).then(res => {
                    //取6条数据
                    this.getNoticeList = res.data.splice(0,6);
                    //取title组成新数组
                    //this.noticeTitleList = this.getNoticeList.map(item => item.noticeTitle);
                    console.log("========", this.noticeTitleList )
                })
            }
        }
    }
</script>

<style>
    .header {
        //#ifdef H5 || MP
        margin-top: 88rpx;
        //#endif
        //#ifdef APP-PLUS
        margin-top: 148rpx;
        //#endif
        height: 320rpx;
        /* border-radius: 0 0 60rpx 60rpx; */
        background: linear-gradient(to bottom, #5bacff, rgba(91, 172, 255, 0.2));
    }
    .banner {
        padding: 20rpx;
    }
    .warp {
        margin-bottom: 36rpx;
    }
    .nav {
        border-top: 1px solid #eaeaea;
        display: flex;
        flex-wrap: wrap;
    }
    /* .nav .item {
        width: 33.33%;
        padding-top: 51rpx;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
            font-size: 25rpx;
            color: #898989;
        }
    } */
    .item {
        padding-top: 51rpx;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .item span {
        font-size: 25rpx;
        color: #898989;
    }
    .go {
        margin-top: 40rpx;
        padding: 0 14rpx;
    }
    .content {
        margin: 30rpx 0 36rpx 0;
        padding: 0 30rpx;
    }
    .content .con-hd {
        margin-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
    }
    .content .con-hd span {
        margin-left: -260rpx;
    }
    .more {
        color: #8d9ba3;
        font-size: 22rpx;
        text-decoration: none;
    }
</style>
